<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="1" data-page-identification="x_hb0xe6o0k2">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
            <div class="content">
                <div v-for="group in items" :key="group.groupName">
                    <!-- 显示项目类型标题 -->
                    <div class="type-title">{{ group.groupName }}</div>
                    <div v-for="item in group.items" :key="item.id" class="item">
                        <div class="item-top">
                            <div class="sub-time">
                                <span class="default-font">申请时间：</span>
                                <span class="weight-font">{{ item.submitTime }}</span>
                            </div>
                            <div class="sub-people">
                                <span class="default-font">申请人：</span>
                                <span class="weight-font">{{ item.submitter }}</span>
                            </div>
                            <div class="urging">催办</div>
                        </div>
                        <div class="item-inner">
                            <div v-for="field in item.fields" :key="field.title" class="item-content">
                                <span class="item-title">{{ field.title }}</span>
                                <span class="item-main">{{ field.value }}</span>
                            </div>
                            <div class="detail-batch">
                                <a-space>
                                    <div class="detail-btn">详情</div>
                                    <div class="pass-btn">通过</div>
                                    <div class="reject-btn">驳回</div>
                                </a-space>
                            </div>
                        </div>
                        <!-- 操作部分 -->
                    </div>
                </div>
            </div>

<!--          <a-date-picker v-model:value="value1" />-->
          {{value1}}
          <a-range-picker v-model:value="value1" valueFormat="YYYY-MM-DD"></a-range-picker>
            <!-- end vid_q2pj193dfc 自定义模板_7xu4mdl9mj -->
        </a-spin>
    </div>
  <a-table :columns="columns" :data-source="data1">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
          <a-divider type="vertical" />
          <a class="ant-dropdown-link">
            More actions
            <down-outlined />
          </a>
        </span>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    const router = useRouter();
    const route = useRoute();
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index';
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is';
    import dayjs from 'dayjs';
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
    import { message, notification, Modal } from 'ant-design-vue';
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format';
    import colorTheme from '@/design/custom-theme.json';
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        processInstanceId: {
            type: [String, Number, Boolean],
            default: undefined
        }
    });
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true });
    };

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = [];
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    });
    const authInfo = localGet('app-user-store');

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name];
    };

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        processInstanceId: props.processInstanceId ?? route.query.processInstanceId
    });

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0);
    onMounted(() => {});

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer);
        });
    });

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const value1 = ['2025-08-09','2024-01-01']
    const columns = [
      {
        name: 'Name',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
      },
      {
        title: 'Tags',
        key: 'tags',
        dataIndex: 'tags',
      },
      {
        title: 'Action',
        key: 'action',
      },
    ];

    const data1 = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        tags: ['nice', 'developer'],
      },
      {
        key: '2',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        tags: ['loser'],
      },
      {
        key: '3',
        name: 'Joe Black',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
        tags: ['cool', 'teacher'],
      },
    ];
    const data = ref([
        {
            '平台/市场项目-新建': [
                {
                    id: '1',
                    code: 'work_flow_code_create-milestones_00000001',
                    submitter: '冯腾飞',
                    submitTime: '2024-07-29 16:41:48',
                    approveFiledShow: {
                        projectName: '测试项目',
                        projectCode: '测试编号',
                        milepostName: '测试里程碑',
                        taskName: '测试任务',
                        actionTaskName: '测试行动项',
                        projectDirector: '测试项目负责人',
                        projectManagementOffice: '测试pmo',
                        pmName: '测试pmnam',
                        plName: '测试plname',
                        productLeaderName: '测试productname',
                        taskOwner: '测试tsower',
                        assessorName: '测试assess',
                        dailyDate: '测试dailu',
                        teamLeader: '测试tml',
                        leader: '测试ler',
                        submitter: '测试sub',
                        submitTime: '2024-07-29 09:03:04'
                    }
                },
                {
                    id: '2',
                    submitter: '冯腾飞',
                    code: 'work_flow_code_project_00000003',
                    submitTime: '2024-07-29 16:41:48',
                    projectCode: 'PC123',
                    plName: '张三',
                    productLeaderName: '李四',
                    projectName: '项目A',
                    approveFiledShow: {
                        projectName: '测试11项目',
                        projectCode: '测试111编号',
                        milepostName: '测试111里程碑',
                        taskName: '测试任111务',
                        actionTaskName: '测试11行动项',
                        projectDirector: '2223123',
                        projectManagementOffice: '测123132试pmo',
                        pmName: '测试p123123mnam',
                        plName: '测试plname',
                        productLeaderName: '测试pro萨达ductname',
                        taskOwner: '测试tso阿达wer',
                        assessorName: '测撒大大试assess',
                        dailyDate: '测试d撒大大ailu',
                        teamLeader: '测撒打算试tml',
                        leader: '测试ler行政村',
                        submitter: '测试su实打实大b',
                        submitTime: '2024-07-29 09:03:04'
                    }
                }
            ]
        }
    ]);
    const defaultMap = [
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const ptMapping = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目负责人', field: 'plName' },
        { title: '产品经理', field: 'productLeaderName' },
        { title: '项目经理', field: 'pmName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map2 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '任务负责人', field: 'taskOwner' },
        { title: '审核员', field: 'assessorName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map3 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目总监', field: 'projectDirector' },
        { title: 'PMO', field: 'projectManagementOffice' },
        { title: '项目经理', field: 'pmName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map4 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '项目经理', field: 'pmName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map5 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '项目阶段名称', field: 'milepostName' },
        { title: '任务名称', field: 'taskName' },
        { title: '项目经理', field: 'pmName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map6 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目总监', field: 'projectDirector' },
        { title: 'PMO', field: 'projectManagementOffice' },
        { title: '项目经理', field: 'pmName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map7 = [
        { title: '模板名称', field: 'templateName' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map8 = [
        { title: '行动项任务名称', field: 'actionTaskName' },
        { title: '任务负责人', field: 'taskOwner' },
        { title: '审核员', field: 'assessorName' },
        { title: 'PMO', field: 'projectManagementOffice' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map9 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    const map10 = [
        { title: '项目名称', field: 'projectName' },
        { title: '项目代号', field: 'projectCode' },
        { title: '团队负责人', field: 'teamLeader' },
        { title: '负责人', field: 'leader' },
        { title: '提交人', field: 'submitter' },
        { title: '提交时间', field: 'submitTime' }
    ];
    // 映射关系
    const fieldMap = {
        // 平台/市场项目-新建
        work_flow_code_project00000001: ptMapping,
        work_flow_code_project_00000003: ptMapping,
        work_flow_code_project_00000005: ptMapping,
        work_flow_code_platform_project_risk_close_00000001: ptMapping,
        work_flow_code_project_00000007: ptMapping,
        work_flow_code_task_pt_00000001: map2,
        work_flow_code_task_pt_00000002: map2,
        work_flow_code_task_00000001: map2,
        work_flow_code_task_modify_00000001: map2,
        work_flow_code_delivery_project_create_00000001: map3,
        work_flow_code_delivery_project_delete_00000001: map3,
        work_flow_code_delivery_project_update_00000001: map3,
        work_flow_code_delivery_project_risk_close_00000001: map3,
        work_flow_code_requirement_change_00000001: map3,
        'work_flow_code_create-milestones_00000001': map4,
        work_flow_code_create_work_flow_code_milepost_00000003: map4,
        work_flow_code_editing_milestone_00000001: map4,
        work_flow_code_create_task_00000001: map5,
        work_flow_code_task_00000002: map5,
        work_flow_code_task_recovery_00000001: map5,
        work_flow_code_task_switch_00000001: map5,
        'work_flow_code_project-template-create_00000001': map6,
        work_flow_code_project_template_delete_00000001: map6,
        work_flow_code_project_template_update_00000001: map6,
        work_flow_code_project_template_open_close_00000001: map6,
        work_flow_code_editing_milestone_00000002: [
            { title: '项目名称', field: 'projectName' },
            { title: '项目阶段名称', field: 'milepostName' },
            { title: '项目经理', field: 'pmName' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ],
        project_template_list_delete_00000001: map7,
        project_template_list_go_offline_00000001: map7,
        project_template_list_go_online_00000001: map7,
        work_flow_code_task_sa_00000001: [
            { title: '项目名称', field: 'projectName' },
            { title: '项目阶段名称', field: 'milepostName' },
            { title: '任务名称', field: 'taskName' },
            { title: '项目经理', field: 'pmName' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ],
        work_flow_code_action_task_edit_00000001: map8,
        work_flow_code_action_task_complete_00000001: map8,
        work_flow_code_risk_00000001: [
            { title: '项目名称', field: 'projectName' },
            { title: '项目阶段名称', field: 'milepostName' },
            { title: '任务名称', field: 'taskName' },
            { title: '风险解决人', field: 'solver' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ],
        work_flow_code_project_00000007: [
            { title: '项目名称', field: 'projectName' },
            { title: '项目代号', field: 'projectCode' },
            { title: '项目负责人', field: 'plName' },
            { title: '产品经理', field: 'productLeaderName' },
            { title: '项目经理', field: 'pmName' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ],
        work_flow_code_delete_work_week_evolve_00000001: map9,
        work_flow_code_edit_work_week_evolve_00000001: map9,
        work_flow_code_add_work_week_evolve_00000001: map9,
        'work_flow_code_platform_create-monthly-goals_00000001': map10,
        'work_flow_code_platform_delete-monthly-goals_00000001': map10,
        'work_flow_code_platform_editing-monthly-goals_00000001': map10,
        'work_flow_code_delivery_create-monthly-goals_00000001': map10,
        'work_flow_code_delivery_delete-monthly-goals_00000001': map10,
        'work_flow_code_delivery_editing-monthly-goals_00000001': map10,
        work_flow_code_daily_00000001: [
            { title: '工时对应时间', field: 'dailyDate' },
            { title: '项目名称', field: 'projectName' },
            { title: '项目阶段名称', field: 'milepostName' },
            { title: '任务名称', field: 'taskName' },
            { title: '工时', field: 'workingHours' },
            { title: '风险描述', field: 'riskDescription' },
            { title: '解决方案', field: 'solution' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ],
        work_flow_code_daily_00000002: [
            { title: '工时对应时间', field: 'dailyDate' },
            { title: '工作类型', field: 'workType' },
            { title: '工时', field: 'workingHours' },
            { title: '提交人', field: 'submitter' },
            { title: '提交时间', field: 'submitTime' }
        ]
        // 其他映射关系
    };

    // 计算每条数据需要展示的字段
    const items = computed(() => {
        return data.value.map(group => {
            const [groupName, groupItems] = Object.entries(group)[0];
            return {
                groupName,
                items: groupItems.map(item => {
                    const fields = fieldMap[item.code] || defaultMap; // 使用默认映射
                    return {
                        ...item,
                        fields: fields.map(field => ({
                            title: field.title,
                            value: item.approveFiledShow[field.field]
                        }))
                    };
                })
            };
        });
    });
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: #fff;
        padding: 24px;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    .item {
        display: flex;
        background: #ffffff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        margin-bottom: 16px;
        height: 112px;
        padding: 10px 16px;
        flex-direction: column;
    }
    .item-content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .detail-batch {
        display: flex;
        justify-content: space-between;
    }
    .table-action {
        flex: 1;
    }
    .item-title,
    .item-main {
        padding: 0 16px;
        border-left: 1px solid #d9d9d9;
    }
    .item-main {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
        letter-spacing: 0;
        font-weight: 600;
    }
    .item-title {
        font-size: 14px;
        color: #595959;
        letter-spacing: 0;
        font-weight: 400;
    }
    .type-title {
        font-size: 16px;
        color: #3875ff;
        letter-spacing: 0;
        font-weight: 600;
        margin-bottom: 12px;
    }
    .item-top {
        width: 100%;
        background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.2) 100%);
        border-radius: 4px 0 0 0;
        height: 40px;
        border-left: 4px solid #3875ff;
        padding: 10px 20px;
        margin-bottom: 10px;
        display: flex;
    }
    .item-inner {
        display: flex;
    }
    .detail-btn,
    .pass-btn,
    .reject-btn {
        width: 64px;
        height: 28px;
        line-height: 28px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
    }
    .detail-btn {
        background: rgba(56, 117, 255, 0.1);
        border: 1px solid #3875ff;
        border-radius: 2px;
        color: #3875ff;
    }
    .pass-btn {
        background: rgba(82, 196, 26, 0.2);
        border: 1px solid #52c41a;
        border-radius: 2px;
        color: #52c41a;
    }
    .reject-btn {
        background: rgba(245, 34, 45, 0.1);
        border: 1px solid #f5222d;
        border-radius: 2px;
        color: #f5222d;
    }
    .sub-time {
        margin-right: 40px;
    }
    .sub-people {
        margin-right: 16px;
    }
    .urging {
        width: 44px;
        height: 19px;
        line-height: 19px;
        background: #fa5f00;
        border-radius: 2px;
        color: #fff;
        text-align: center;
    }
   :deep(.ant3-table-cell-row-hover) {
      background-color:#FAFAFA !important
    }
</style>
